<!--
 * @Description:
 * @Author: dh
 * @Date: 2022-08-01 16:00:59
 * @LastEditors: dh
 * @LastEditTime: 2022-08-17 14:29:36
-->
<template>
	<div class="content-box">
		<el-alert
			title="通过 component :is 组件属性 && v-bind 属性透传，可以将 template 中的 html 代码全部改变为 columns 配置项，具体配置请看代码。"
			type="warning"
			:closable="false"
		/>
		<component :is="'el-form'" v-bind="options.form" ref="proFormRef" :model="model">
			<template v-for="item in options.columns" :key="item.prop">
				<component :is="'el-form-item'" v-bind="item.formItem">
					<component :is="`el-${item.attrs.typeName}`" v-bind="item.attrs" v-model="model[item.formItem.prop]" />
				</component>
			</template>
		</component>
	</div>
</template>

<script setup lang="ts" name="proForm">
import { ref } from 'vue';

let model = ref<any>({});

const options = ref({
	// 表单整体配置项
	form: {
		inline: false,
		labelPosition: 'right',
		labelWidth: '80px',
		size: 'default',
		disabled: false,
		labelSuffix: ' :',
	},
	// 表单列配置项 (formItem 代表 item 配置项，attrs 代表 输入、选择框 配置项)
	columns: [
		{
			formItem: {
				label: '用户名',
				prop: 'username',
				labelWidth: '80px',
				required: true,
			},
			attrs: {
				typeName: 'input',
				clearable: true,
				placeholder: '请输入用户名',
				disabled: true,
			},
		},
		{
			formItem: {
				label: '密码',
				prop: 'password',
				class: 'data',
			},
			attrs: {
				typeName: 'input',
				clearable: true,
				autofocus: true,
				placeholder: '请输入密码',
				type: 'password',
			},
		},
		{
			formItem: {
				label: '邮箱',
				prop: 'email',
			},
			attrs: {
				typeName: 'input',
				placeholder: '请输入邮箱',
				clearable: true,
				style: 'width:500px',
			},
		},
	],
});
</script>

<style scoped lang="scss">
.el-form {
	width: 100%;
	margin-top: 20px;
}
</style>
